<template>
  <div class="topic-detail-container">
    <div class="chart" id="chart_left2" ref="chart_left2"></div>
  </div>
</template>

<script>
export default {
  name: "topic_detail",
  data() {
    return {
      chartOption: [],
      topWordOption: []
    }
  },
  mounted() {

  },
  methods: {
    getEchart(index) {
      let myChart = this.$echarts.init(this.$refs.chart_left2);
      let scaleData = []
      // console.log(this.topWordOption)
      if (index === -1) {
        for (let i = 0; i < this.topWordOption.length; i++) {
          let t = this.topWordOption[i]
          scaleData.push({
            name: t.name,
            value: t.value * 1000,
          })
        }
      } else {
        for (let i = 0; i < this.chartOption[index].key_words.length; i++) {
          let t = this.chartOption[index].key_words[i]
          scaleData.push({
            name: t[1],
            value: t[0] * 1000,
          })
        }
      }
      // console.log(scaleData)
      // let rich = {
      //   white: {
      //     color: '#ddd',
      //     align: 'center',
      //     padding: [3, 0]
      //   }
      // };
      let placeHolderStyle = {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0
        }
      };
      let data = []
      let color = ['#FF3333', '#FE9933', '#FFFF33', '#99FF33', '#33FF33', '#33FF99', '#33FFFF', '#3399FF', '#3333FF', '#9933FF', '#FF33FF', '#FF33CC']
      for (let i = 0; i < scaleData.length; i++) {
        data.push({
          value: scaleData[i].value,
          name: scaleData[i].name,
          itemStyle: {
            normal: {
              borderWidth: 6,
              shadowBlur: 10,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        }, {
          value: 2,
          name: '',
          itemStyle: placeHolderStyle
        });
      }

      let option = {
        series: [{
          name: '',
          type: 'pie',
          clockWise: false,
          radius: ['66%', '68%'],
          center: ['50%', '50%'],
          hoverAnimation: false,
          textStyle: {
            color: '#b3ccf8',
            fontSize: 13
          },
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside',
                color: '#ddd',
                formatter: (params) => {
                  // let percent = 0;
                  // let total = 0;
                  // for (let i = 0; i < scaleData.length; i++) {
                  //   total += scaleData[i].value;
                  // }
                  // percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== '') {
                    return params.name + '\n' + params.value / 1000;
                  } else {
                    return '';
                  }
                },
                // rich: rich
              },
              labelLine: {
                length: 15,
                length2: 35,
                show: true,
                color: '#00ffff'
              }
            }
          },
          data: data
        }]
      }

      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {

  }
};
</script>

<style lang="scss" scoped>
.topic-detail-container {
  .chart {
    height: 3rem;
  }
}
</style>
